<{use class="frontend\assets\FancyBoxAsset"}>
<{FancyBoxAsset::register($this)|void}>
<{use class="frontend\assets\SwiperAsset"}>
<{SwiperAsset::register($this)|void}>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>


    <div class="content margin_top_foot">
        <header class="header fixed_top bg_mx_green"></header>


        <div class="swiper-container swiper-container-horizontal">
            <div class="swiper-wrapper">
                <{foreach $banner as $key => $row}>
                    <div class="swiper-slide" style="width: 100%;">
                        <a href="<{$row}>" rel="banner" class="fancybox"><img src="<{$row}>" style="min-height: 300px"/></a>
                    </div>
                <{/foreach}>
            </div>

            <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
                <{foreach $banner as $key => $row}>
                <span class="swiper-pagination-bullet"><{$key}></span>
                <{/foreach}>
            </div>

        </div>

        <div class="detail bg_white"></div>
        <footer class="fixed_bottom bg_mx_green font_16 text_center lineheight_50" onclick="goraising()">立即认养</footer>
        <form class="fixed all bg_dark raising_mask hide">
            <div class="raising_confirm">
                <div class="padding_15 confirm_number bg_white"></div>
                <button class="all_width btn btn_mx_green font_16 text_center lineheight_50">下一步</button>
            </div>
        </form>
    </div>
    <div class="toast"></div>
    <!-- toast模版 -->
    <script type="text/template" charset="utf-8" id='toast_template'>
        <i class="iconfont icon-toast{{=it.icon}}"></i>
        <div class="toast_text">{{=it.text}}</div>
    </script>
    <script type="text/template" charset="utf-8" id='swipe_template'></script>
    <script type="text/template" charset="utf-8" id='number_template'>
        <div class="padding_v_15 flex border_b">
            <div class="width_100">
                <img src="{{=it.img}}" alt="">
            </div>
            <div class="left_100 padding_l_15 font_12">
                <div class="">{{=it.title}}</div>
                <div class="">品种：{{=it.vname}}</div>
                <div class="">代养农户：{{=it.farmer}}</div>
                <div class="">批次：{{=it.batch}}</div>
            </div>
        </div>
        <div class="padding_10_15 flex border_b">
            <div class="width_70">姓名</div>
            <div class="left_70">
                <input type="text" name="name" placeholder="请输入姓名" request title="姓名">
            </div>
        </div>



        <div class="padding_15 flex border_b">
            <div class="width_100">手机号</div>
            <div class="left_70">
                <input type="text" name="tel" value="{{=it.tel||''}}" placeholder="请填入手机号" request title="手机号" data-pattern="^(0|86|17951)?(13\d|15[0-35-9]|17[678]|18\d|14[57])\d{8}$" data-tips="11位手机号">
            </div>
            <div class="width_100 border_l text_center" onclick="get_code()">发送验证码</div>
        </div>
        <div class="padding_15 flex border_b">
            <div class="width_100">图形码</div>
            <div class="left_70">
                <input type="text" name="pcode" value="" placeholder="请填入图形验证码" request title="图形验证码" >
            </div>
            <div class="width_100 border_l text_center"><img style="height: 30px;" id="imgVerifyCode" onclick="changeVerifyCode()"  alt="验证码"></div>
        </div>
        <div class="padding_10_15 flex border_b">
            <div class="width_70">手机验证码</div>
            <div class="left_70">
                <input type="text" name="code" placeholder="请输入手机验证码" request title="手机验证码">
            </div>
        </div>
        <div class="padding_10_15 flex border_b">
            <div class="width_70">备注</div>
            <div class="left_70">
                <textarea name="remark" placeholder="请输入备注"></textarea>
            </div>
        </div>
        <div class="padding_10_15 flex border_b">
            <div class="width_70">是否同意</div>
            <div class="left_70">
                <input class="checkbox" type="checkbox" request title="必须确认并同意认养协议" name="xieyi" id=""><a href="<{url route='/shop/rasing/xieyi'}>">《<{$article['title']}>》</a><a href="<{url route='/shop/rasing/down-load'}>">下载</a>
            </div>
        </div>

        <input name="_csrf" type="hidden" id="_csrf" value="<{$app->request->csrfToken}>">
        <input type="hidden" name="pigid" value="<{$id}>">
    </script>
    <script type="text/template" charset="utf-8" id='detail_template'>
        <div class="border_b padding_h_15">
            <div class="lineheight_4 border_b">{{=it.title}}</div>
            <div class="v_center light padding_v_15">
                <div class="flex_1 lineheight_2">
                    <div class="">品种：{{=it.vname}}</div>
                    <div class="">代养农户：{{=it.farmer}}</div>
                    <div class="">批次：{{=it.batch}}</div>
                    <div class="">入栏：{{=it.intime}}</div>
                    <div class="">预出栏：{{=it.planout}}</div>
                </div>
                <div class="flex_1 all_height text_center">
                    <div class="border_warning block_80 block_center circle relative row" style="background-image: -webkit-linear-gradient(to bottom,#fff {{=(100-it.ratio)}}%,#ffc107 {{=(100-it.ratio)}}%);background-image: linear-gradient(to bottom,#fff {{=(100-it.ratio)}}%,#ffc107 {{=(100-it.ratio)}}%);">
                        <span class="font_18">{{=it.ratio}}%</span>
                        <div class="font_12 raising_left">剩余{{=it.leftnum}}天</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="lineheight_1 flex text_center padding_v_10 border_b">
            <div class="flex_1 mx_green detail_nav" for=".detail_info">品种介绍</div>
            <div class="flex_1 border_l detail_nav" for=".history">仔猪档案</div>
            <div class="flex_1 border_l detail_nav" for=".records">成长记录</div>
            <div class="flex_1 border_l detail_nav" for=".pigvideo">仔猪视频</div>
        </div>
        <div class="padding_15">
            <div class="detail_info text_indent">{{=it.info}}</div>
            <div class="history row hide">
                <div class="">仔猪合同编号：{{=it.contract_no}}</div>
                <!--<div class="">猪场：{{=it.slaughterhouse}}</div>-->
                <div class="">领养价格：{{=it.price}} 元</div>
                <div class="">仔猪编号：{{=it.no}}</div>
                <div class="">批次：{{=it.batch}}</div>
                <div class="">代养地址：{{=it.address}}</div>
                <div class="pull_left flex_row_2">
                    <div class="row_one">
                        <div class="">父本编号:{{=it.f_no}}</div>
                        <a href="{{=it.f_img}}" class="fancybox" data-fancybox-group="gallery" >
                            <img src="{{=it.f_img}}" alt="">
                        </a>
                    </div>
                    <div class="row_one">
                        <div class="">母本编号:{{=it.m_no}}</div>
                        <a href="{{=it.f_img}}" class="fancybox" data-fancybox-group="gallery" >
                            <img src="{{=it.m_img}}" alt="">
                        </a>
                    </div>
                </div>
            </div>
            <div class="records light hide">
                {{for(var i=0;i<it.records.length;i++){}}
                <div class="h_justify" onclick="location.href='{{=it.records[i].url}}'">
                    <div>{{=it.records[i].title}}</div>
                    <div>第{{=it.records[i].no}}次常规巡检</div>
                    <div>巡检人：{{=it.records[i].who}}</div>
                </div>
                {{}}}
            </div>

            <div class="pigvideo hide">
                {{if(it.video=="/static/images/noimage.jpg"){}}
                    <div class="detail_info ">仔猪视频正在完善中。。。</div>
                {{}else{}}
                <video style="margin-bottom: 20px;" id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="100%" height="240" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'>
                    <source src="{{=it.video}}" type='video/mp4' />
                    <p class="vjs-no-js">您的手机不支持视频播放，请升级浏览器 <a href="http://videojs.com/html5-video-support/" target="_blank">支持Html5video</a></p>
                </video>
                {{}}}
            </div>
        </div>
    </script>
    <script>
        // 页面初始化

            var detail = <{$pig}>;
            console.log(detail);
            var evaldetail = doT.template($("#detail_template").text());
            var evalnumber = doT.template($("#number_template").text());
            var evalToast = doT.template($("#toast_template").text());
            loaddata(".detail",evaldetail,detail);
            loaddata(".confirm_number",evalnumber,detail);
            $(".detail_nav").click(function(){
                $(this).addClass("mx_green").siblings().removeClass("mx_green");
                $($(this).attr("for")).show().siblings().hide()
            })
            loadheadbar("仔猪详情");
        // 去认领
            function goraising(){
                $(".raising_mask").show()
                $("body").addClass("row")
                $(window).on('touchmove', function (e) {
                    e.preventDefault();
                });
            }
            $(".raising_mask").click(function(e){
                if(e.target == this){
                    $(".raising_mask").hide()
                    $("body").removeClass("row")
                    $(window).unbind('touchmove');
                }
            })
        // 下一步
            var submited = false;
            $(".raising_mask").submit(function(e){
                e.preventDefault();
                with(this){
                    for (var i = 0; i < this.length; i++) {
                        if($(this[i]).attr("request")==""){
                            if(!checkone(this[i])){
                                return false;
                            }
                        }
                    }
                    if(submited) return false;
                    var data_submit = $(".raising_mask").serializeObject();console.log(data_submit)
                    $.post("/shop/order/rasing-pre-pay",data_submit,function(res){console.log(res);
                        toast("attention",res.msg);
                        if(res.status == 0){
                            submited = true;
                            location.href = res.url;
                        }
                    },"json")
                }
            })


        //点击预览图片
        $('.fancybox').fancybox({
            'titlePosition' : 'over',
            'cyclic'        : true,
            'height':'320px',
            'width':'560px'
        });

        //幻灯片
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            paginationClickable: true,
            paginationBulletRender: function (swiper, index, className) {
                return '<span class="' + className + '">' + (index + 1) + '</span>';
            }
        });

        // 获取验证码
        var got = false;
        function get_code(){
            var tel = $("input[name='tel']").val();
            var pcode = $("input[name='pcode']").val();
            if(got) return false;
            $.post("/util/sms-code",{pcode:pcode,'tel':tel,'_csrf':"<{$app->request->csrfToken}>"},function(res){
                alert(res.msg);
                if(res.status == 0){
                    got = true;
                }
            },"json");
        }



        $(function(){                   //当页面加载的时候
            changeVerifyCode();         //刷新或者重新加载一个验证码

            //清除输入框里面的数据
            $("#clear_form").click(function(){
                $("input").val('');
            });
        });

        //更改或者重新加载验证码
        function changeVerifyCode() {
            $.ajax({
                url: "/util/captcha?refresh",
                dataType: 'json',
                cache: false,
                success: function(data) {
                    $("#imgVerifyCode").attr('src', data['url']);
                }
            });
        }

    </script>


